<template>
  <div class="container-box">
    <van-nav-bar fixed>
      <!-- 返回 -->
      <template #left>
        <van-icon name="arrow-left" @click="onClickLeft" />
      </template>
      <!-- 查询 -->
      <template #title>
        登录
      </template>
      <!-- 个人中心 -->
      <template #right>
        <van-button plain type="info" @click="registerBtn">快速注册</van-button>
      </template>
    </van-nav-bar>
    <!-- tab切换 -->
    <van-tabs v-model="active" @change="changeFn">
      <van-tab title="普通登录"></van-tab>
      <van-tab title="动态密码登录"></van-tab>
    </van-tabs>
    <div class="wrap">
      <div v-if="active == 0">
        <van-form @submit="onSubmit">
          <van-field v-model="mobile" placeholder="请输入手机号" />
          <van-field
            v-model="password"
            type="password"
            placeholder="请输入密码"
          />
          <div style="margin: 16px;">
            <van-button block type="warning" native-type="submit"
              >立即登录</van-button
            >
          </div>
        </van-form>
      </div>
      <div v-if="active == 1">
        <van-form>
          <van-field v-if="show" v-model="mobile2" placeholder="请输入手机号" />
          <div v-else class="yzmWrap">
            <van-field v-model="yzm" placeholder="动态密码" />
            <van-button class="yzmBtn" :disabled="time > 0" @click="yzmBtn">{{
              time > 0 ? time + 's后重新获取' : '获取验证码'
            }}</van-button>
          </div>
          <div style="margin: 16px;">
            <van-button v-if="show" block type="warning" @click="yzmFn"
              >获取手机验证码</van-button
            >
            <van-button v-else block type="warning" @click="onSubmit2"
              >立即登录</van-button
            >
          </div>
        </van-form>
      </div>
      <!-- 第三方登录 -->
      <div class="loginBottom">
        <span>试试第三方登录？</span>
        <div>
          <img src="../../assets/images/ad01.jpg" alt="" />
          <img src="../../assets/images/ad02.jpg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      mobile: '',
      password: '',
      mobile2: '',
      yzm: '',
      show: true,
      disabled: true,
      time: 60
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onSubmit(values) {
      console.log('submit', values)
    },
    setTime() {
      // 启用按钮定时器
      const timeOut = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          this.disabled = false
          this.time = 60
          clearInterval(timeOut)
        }
      }, 1000)
    },
    yzmFn() {
      // 获取验证码 改变input显示
      this.show = false
      this.disabled = true
      this.setTime()
    },
    yzmBtn() {
      // 再次获取验证码
      console.log(222)
      this.disabled = true
      this.setTime()
    },
    onSubmit2() {
      console.log(1111)
    },
    changeFn() {
      // 切换是重置当前页面数据
      this.mobile = ''
      this.password = ''
      this.mobile2 = ''
      this.yzm = ''
      this.show = true
    },
    registerBtn() {
      // 跳转注册页面
      this.$router.push('/register')
    }
  }
}
</script>

<style lang="less" scoped>
.container-box {
  background-color: #f5f5f5;
  padding-top: 46px;
  height: 100%;
  /deep/.van-nav-bar i.van-icon {
    color: #ff4463;
  }
  /deep/.van-nav-bar__title {
    color: #ff4463;
  }
  /deep/.van-tabs--line .van-tabs__wrap {
    border-bottom: 1px solid #eaeaea;
  }
  /deep/.van-hairline--bottom::after {
    border: 1px solid #eaeaea;
  }
  .van-tabs {
    /deep/.van-tabs__nav {
      color: #000;
      background: transparent;
    }
    /deep/.van-tab:nth-child(1) {
      border-right: 1px solid #eaeaea;
    }
    /deep/.van-tab--active {
      background: #fff;
      color: #ff4463;
    }
    /deep/.van-tabs__line {
      height: 0;
    }
  }
  /deep/.van-button--plain.van-button--info {
    color: #ff4463;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
    padding: 0 0.2rem;
    border-color: #ff4463;
    border-width: 2px;
  }
  .wrap {
    margin-top: 14px;
    border-top: 1px solid #eaeaea;
  }
  .van-button {
    height: 35px;
  }
  /deep/.van-button--warning {
    background-color: #f54f52;
    border: 0;
  }
  .van-form {
    .van-cell:nth-child(2)::after {
      border-bottom: 0;
    }
    .yzmWrap {
      position: relative;
      .yzmBtn {
        position: absolute;
        right: 0.2rem;
        top: 50%;
        border: 0;
        transform: translateY(-50%);
        font-size: 0.15rem;
        height: 0.5rem;
        background: #f54f52;
        color: #fff;
      }
    }
  }
  .loginBottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.8rem;
    span {
      font-size: 0.1rem;
      color: #746b61;
    }
    div {
      margin-top: 0.2rem;
      display: flex;
      img {
        width: 1rem;
        height: 1rem;
        line-height: 3.3rem;
        font-size: 1.5rem;
        border-radius: 50%;
        margin: 0 0.2rem;
      }
    }
  }
}
</style>
